<template>
  <view class="submit-complaint-page">
    <!-- 投诉表单 -->
    <view class="complaint-form">
      <view class="form-header">
        <text class="form-title">提交投诉</text>
        <text class="form-subtitle">请详细描述您的问题，我们会尽快处理</text>
      </view>

      <view class="form-section">
        <view class="form-item">
          <text class="item-label">投诉类型 *</text>
          <view class="type-selector">
            <view 
              v-for="type in complaintTypes" 
              :key="type.value"
              class="type-option"
              :class="{ active: selectedType === type.value }"
              @click="selectType(type.value)"
            >
              <text class="type-icon">{{ type.icon }}</text>
              <text class="type-text">{{ type.label }}</text>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="item-label">紧急程度 *</text>
          <view class="urgency-selector">
            <view 
              v-for="urgency in urgencyLevels" 
              :key="urgency.value"
              class="urgency-option"
              :class="{ active: selectedUrgency === urgency.value }"
              @click="selectUrgency(urgency.value)"
            >
              <text class="urgency-icon">{{ urgency.icon }}</text>
              <text class="urgency-text">{{ urgency.label }}</text>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="item-label">投诉标题 *</text>
          <input 
            v-model="formData.title"
            class="form-input"
            placeholder="请简要描述问题"
            maxlength="50"
          />
          <text class="input-counter">{{ formData.title.length }}/50</text>
        </view>

        <view class="form-item">
          <text class="item-label">详细描述 *</text>
          <textarea 
            v-model="formData.description"
            class="form-textarea"
            placeholder="请详细描述问题的具体情况、发生时间、影响范围等"
            maxlength="500"
            :auto-height="true"
          />
          <text class="input-counter">{{ formData.description.length }}/500</text>
        </view>

        <view class="form-item">
          <text class="item-label">联系电话</text>
          <input 
            v-model="formData.phone"
            class="form-input"
            placeholder="请输入您的联系电话"
            type="number"
            maxlength="11"
          />
        </view>

        <view class="form-item">
          <text class="item-label">问题位置</text>
          <input 
            v-model="formData.location"
            class="form-input"
            placeholder="请描述问题发生的具体位置"
            maxlength="100"
          />
        </view>

        <view class="form-item">
          <text class="item-label">上传图片</text>
          <view class="image-upload">
            <view 
              v-for="(image, index) in formData.images" 
              :key="index"
              class="image-item"
            >
              <image :src="image" mode="aspectFill" class="uploaded-image" />
              <view class="image-delete" @click="removeImage(index)">×</view>
            </view>
            <view 
              v-if="formData.images.length < 5"
              class="upload-button"
              @click="chooseImage"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">添加图片</text>
            </view>
          </view>
          <text class="upload-tip">最多上传5张图片，每张不超过5MB</text>
        </view>
      </view>

      <view class="form-actions">
        <button class="btn btn-secondary" @click="resetForm">重置</button>
        <button class="btn btn-primary" @click="submitComplaint" :disabled="!isFormValid">
          提交投诉
        </button>
      </view>
    </view>

    <!-- 提交成功提示 -->
    <view v-if="showSuccess" class="success-overlay">
      <view class="success-content">
        <view class="success-icon emoji-text">✅</view>
        <text class="success-title">投诉提交成功</text>
        <text class="success-message">您的投诉已提交，我们会尽快处理并联系您</text>
        <text class="complaint-number">投诉编号：{{ complaintNumber }}</text>
        <button class="btn btn-primary" @click="goBack">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 提交投诉页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 投诉建议提交页面，提供完整的投诉表单功能
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 投诉类型选项
const complaintTypes = ref([
  { value: 'facility', label: '设施问题', icon: '🏠' },
  { value: 'security', label: '安全问题', icon: '🛡️' },
  { value: 'environment', label: '环境问题', icon: '🌳' },
  { value: 'noise', label: '噪音问题', icon: '🔊' },
  { value: 'service', label: '服务问题', icon: '👥' },
  { value: 'other', label: '其他问题', icon: '❓' }
])

// 紧急程度选项
const urgencyLevels = ref([
  { value: '1', label: '一般', icon: '🟢' },
  { value: '2', label: '紧急', icon: '🟡' },
  { value: '3', label: '特急', icon: '🔴' }
])

// 表单数据
const formData = reactive({
  type: '',
  urgency: '',
  title: '',
  description: '',
  phone: '',
  location: '',
  images: []
})

// 选中的类型和紧急程度
const selectedType = ref('')
const selectedUrgency = ref('')

// 提交状态
const showSuccess = ref(false)
const complaintNumber = ref('')

// 计算属性：表单是否有效
const isFormValid = computed(() => {
  return selectedType.value && 
         selectedUrgency.value && 
         formData.title.trim() && 
         formData.description.trim()
})

// 选择投诉类型
const selectType = (type) => {
  selectedType.value = type
  formData.type = type
}

// 选择紧急程度
const selectUrgency = (urgency) => {
  selectedUrgency.value = urgency
  formData.urgency = urgency
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 5 - formData.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      formData.images.push(...res.tempFilePaths)
    },
    fail: (err) => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      })
    }
  })
}

// 移除图片
const removeImage = (index) => {
  formData.images.splice(index, 1)
}

// 重置表单
const resetForm = () => {
  selectedType.value = ''
  selectedUrgency.value = ''
  Object.assign(formData, {
    type: '',
    urgency: '',
    title: '',
    description: '',
    phone: '',
    location: '',
    images: []
  })
}

// 提交投诉
const submitComplaint = () => {
  if (!isFormValid.value) {
    uni.showToast({
      title: '请完善必填信息',
      icon: 'none'
    })
    return
  }

  // 模拟提交
  uni.showLoading({
    title: '提交中...'
  })

  setTimeout(() => {
    uni.hideLoading()
    
    // 生成投诉编号
    complaintNumber.value = 'TS' + Date.now().toString().slice(-8)
    
    // 显示成功提示
    showSuccess.value = true
    
    // 记录到本地存储（演示用）
    const complaints = uni.getStorageSync('complaints') || []
    complaints.unshift({
      id: Date.now(),
      number: complaintNumber.value,
      ...formData,
      status: 'pending',
      statusText: '待处理',
      createTime: new Date().toLocaleString(),
      typeText: complaintTypes.value.find(t => t.value === formData.type)?.label,
      urgencyText: urgencyLevels.value.find(u => u.value === formData.urgency)?.label
    })
    uni.setStorageSync('complaints', complaints)
  }, 1500)
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onMounted(() => {
  console.log('提交投诉页面已加载')
})
</script>

<style scoped>
.submit-complaint-page {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 30rpx;
}

.complaint-form {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.form-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.form-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.form-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.form-section {
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.item-label {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.type-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.type-option.active {
  background: #e3f2fd;
  border-color: #2196f3;
}

.type-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.type-text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

.urgency-selector {
  display: flex;
  gap: 20rpx;
}

.urgency-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.urgency-option.active {
  background: #fff3e0;
  border-color: #ff9800;
}

.urgency-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.urgency-text {
  font-size: 26rpx;
  color: #333;
  text-align: center;
}

.form-input {
  width: 100%;
  padding: 24rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #2196f3;
  background: #fff;
}

.form-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border: 2rpx solid #e9ecef;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  line-height: 1.5;
}

.form-textarea:focus {
  border-color: #2196f3;
  background: #fff;
}

.input-counter {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 10rpx;
}

.image-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.image-delete {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background: #ff4757;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
}

.upload-button {
  width: 160rpx;
  height: 160rpx;
  background: #f8f9fa;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.upload-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
}

.upload-tip {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.form-actions {
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  padding: 30rpx;
  border-radius: 12rpx;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  text-align: center;
}

.btn-primary {
  background: #2196f3;
  color: #fff;
}

.btn-primary:disabled {
  background: #ccc;
  color: #999;
}

.btn-secondary {
  background: #f8f9fa;
  color: #666;
  border: 2rpx solid #e9ecef;
}

.success-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.success-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  max-width: 80%;
}

.success-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.success-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.success-message {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  line-height: 1.5;
}

.complaint-number {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #2196f3;
  margin-bottom: 40rpx;
  padding: 20rpx;
  background: #e3f2fd;
  border-radius: 12rpx;
}
</style>
